<template>
<!-- 添加学科对话框 -->
  <div class='container'>
    <el-dialog :title="cTitle" :visible.sync="dialogFormVisible" width="30%">
      <!--
        :rules="rules"  验证
       -->
       <el-form :model="subject" :rules="rules"   ref="subject" label-width="80px" class="demo-ruleForm">
          <el-form-item label="学科名称" prop="subjectName" >
            <el-input v-model="subject.subjectName" ></el-input>
          </el-form-item>
        </el-form>
        <el-form-item label="是否显示" prop="isFrontDisplay" label-width="80px">
             <!-- eslint-disable-next-line vue/valid-v-model -->
            <el-switch v-model="subject.isFrontDisplay"></el-switch>
        </el-form-item>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="listArr()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/subjects.js'
export default {
  name: 'subjects-add',
  props: {
    subject: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 默认是false
      dialogFormVisible: false,
      // 表单
      ruleForm: {},
      // 验证
      rules: {
        subjectName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    cTitle () {
      return this.subject.id ? '修改学科' : '新增学科'
    }
  },
  methods: {
    // 弹层显示
    show () {
      this.dialogFormVisible = true
    },
    // 新增
    listArr (titleInfo) {
      this.$refs.subject.validate(async (valid) => {
        if (valid) {
          if (this.subject.id) {
            // this.titleInfo.text = '修改'
            const res = await update({
              id: this.subject.id,
              subjectName: this.subject.subjectName,
              isFrontDisplay: this.subject.isFrontDisplay
            })
            this.$emit('subjectSubcomponent', this.subject)
            this.dialogFormVisible = false
            console.log('我是', res)
          } else {
            const res = await add({
              isFrontDisplay: this.subject.isFrontDisplay,
              subjectName: this.subject.subjectName
            })
            // this.titleInfo.text = '增加'
            this.dialogFormVisible = false
            this.$emit('subjectSubcomponent', this.subject)
            console.log('这是aaa', res)
          }
          this.subject.subjectName = ''
        } else {
          this.$message.error('*号为必填项!')
          return false
        }
      })
    }
  }

}
</script>

<style scoped>
.el-dialog__header .el-dialog__title {
  margin-right: 300px
}
</style>
